<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="loginHtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>WhiteCat</title>
    <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
    <link th:href="@{/css/global.css}" rel="stylesheet" />
    <link th:href="@{/css/animate.min.css}" rel="stylesheet" />
    <link th:href="@{/css/index.css}" rel="stylesheet" />
    <link th:href="@{/css/blog.css}" rel="stylesheet" />
    <link th:href="@{/css/me.css}" rel="stylesheet" />
</head>

<body>
<div th:insert="~{front/commons/commons.html :: top}"></div>

<div class="blog-user"></div>

<div class="blog-body">
    <div class="blog-container">
        <div class="blog-main">

            <div class="home-tips shadow">设置</div>
            <div class="blog-main-left animated slideInLeft" style="background: white; width: 1170px" th:if="${condition=='all'}">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    基本信息
                </fieldset>
                <div class="hotusers-avator">
                    <img th:src="@{/common/download/avatar/}+${session.SPRING_SECURITY_CONTEXT.authentication.principal.avatar}" alt="头像" th:if="${session.SPRING_SECURITY_CONTEXT.authentication.principal.avatar}!=null" width="75" height="75">
                    <img th:src="@{/images/avatar/defaultAvatar.jpg}" alt="头像" th:if="${session.SPRING_SECURITY_CONTEXT.authentication.principal.avatar}==null" width="45" height="45">
                    <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>更换头像</button>
                </div>
                <form class="layui-form" method="post" th:action="@{/submitSetUp}" lay-filt]er="example">
                    <input type="hidden" id="_csrf" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input th:value="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}" onblur="usernameCheck()" type="text" name="username" id="L_username" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input" style="width: 180px">
                            <span id="usernameInfo"></span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input th:value="@{*******}" type="text" name="password" readonly=“readonly” class="layui-input" style="width: 180px">
                            <a th:href="@{/user/updatePassword}" style="color: #1abc9c">修改密码</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input th:value="${session.SPRING_SECURITY_CONTEXT.authentication.principal.email}" readonly=“readonly” type="text" name="email" class="layui-input" style="width: 180px"></input>
                                <a th:href="@{/user/checkEmail}" style="color: #1abc9c">修改邮箱</a>
                        </div>
                    </div>
                    <div class="layui-form-item" th:if="${session.SPRING_SECURITY_CONTEXT.authentication.principal.gender!= null}">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="gender" value="1" title="男" checked="">
                            <input type="radio" name="gender" value="0" title="女">
                        </div>
                    </div>
                    <div class="layui-form-item" th:if="${session.SPRING_SECURITY_CONTEXT.authentication.principal.gender== null}">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="gender" value="1" title="男">
                            <input type="radio" name="gender" value="0" title="女" checked="">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">个性签名</label>
                        <div class="layui-input-block" style="width: 400px">
                            <textarea placeholder="请输入内容" class="layui-textarea" name="introduction" th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.introduce}"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn">立即提交</button>
                        </div>
                    </div>

                </form>

            </div>
            <!--修改密码页面-->
            <div class="blog-main-left animated slideInLeft" style="background: white; width: 1170px" th:if="${condition == 'updatePWD'}">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

                </fieldset>
                <div class="layui-form" method="get" lay-filter="example">
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input id="email" th:value="${user.email}" readonly="readonly" type="text" name="email" class="layui-input" style="width: 180px">
                            <button class="layui-btn layui-btn-sm" onclick="sendCode()">发送验证码</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password"  onKeyUp="value=value.replace(/[\W]/g,'')" name="password" id="L_pass" placeholder="只能输入数字和字母" class="layui-input" style="width: 180px">
                            <span id="passwordInfo"></span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password"  onKeyUp="value=value.replace(/[\W]/g,'')" name="againPassword" id="L_repass" placeholder="再次输入新密码" class="layui-input" style="width: 180px">
                            <span id="rePasswordInfo"></span>
                        </div>
                    </div>
                    <input type="hidden" id="_csrf" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-block">
                            <input type="text" name="code" id="code" class="layui-input" style="width: 180px">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" onclick="submitPasswordUpdate()">立刻修改</button>
                        </div>
                    </div>

                </div>

            </div>
            <!--验证旧邮箱页面-->
            <div class="blog-main-left animated slideInLeft" style="background: white; width: 1170px" th:if="${condition == 'checkEmail'}">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

                </fieldset>
                <div class="layui-form" method="get" lay-filter="example">
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input th:value="${user.email}" readonly="readonly" type="text" id="email" name="email" class="layui-input" style="width: 180px">
                            <button class="layui-btn layui-btn-sm" onclick="sendCode()">发送验证码</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-block">
                            <input type="text" name="code" id="checkEmailCode" class="layui-input" style="width: 180px">
                        </div>
                    </div>
                    <input type="hidden" id="_csrf" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" onclick="checkEmailCode()">提交</button>
                        </div>
                    </div>
                </div>

            </div>
            <!--绑定新邮箱页面-->
            <div class="blog-main-left animated slideInLeft" style="background: white; width: 1170px" th:if="${condition == 'updateEmail'}">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

                </fieldset>
                <div class="layui-form" method="get" lay-filter="example">
                    <div class="layui-form-item">
                        <label class="layui-form-label">新邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" id="email"  class="layui-input" style="width: 180px">
                            <button class="layui-btn layui-btn-sm" onclick="sendCode()">发送验证码</button>
                            <span id="emailInfo"></span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-block">
                            <input type="text" required="required" name="code" id="updateEmailCode" class="layui-input" style="width: 180px">
                        </div>
                    </div>
                    <input type="hidden" id="_csrf" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" onclick="submitUpdateEmail()">提交更改</button>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="clear"></div>
    </div>
</div>
<!--页脚-->
<div th:insert="~{front/commons/commons.html :: down}"></div>

<div class="blog-mask animated layui-hide"></div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/index.js}"></script>
<!--格式提示js-->
<script th:src="@{/js/check.js}"></script>
<script th:inline="javascript">
    let imgUrl;
    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

        //设定文件大小限制
        upload.render({
            elem: '#test7'
            ,url: '/common/upload/true' //此处配置你自己的上传接口即可
            ,size: 6000 //限制文件大小，单位 KB
            ,done: function(res){
                layer.msg('上传成功');
                imgUrl=res.data;
            }
        });
    });
</script>
<script>
    function sendCode(){
        $.get({
            url:"/sendMsg",
            data: {
                "email":$("#email").val(),
            },
            dataType:"text",
            success:function (data){
                layer.msg(data)
            },
            error:function (data){
                layer.msg(data)
            }
        })
        return false;	//禁止提交表单
    }

    function submitPasswordUpdate(){
        let pwd=$("#L_pass").val()
        let again=$("#L_repass").val()
        if(pwd==again){
        $.post({
            url:"/user/updatePwd",
            data: {
                "email":$("#email").val(),
                "password":$("#L_pass").val(),
                "_csrf": $("#_csrf").val(),
                "code":$("#code").val(),
            },
            dataType:"text",
            success:function (data){
                layer.msg(data)
            },
            error:function (){
                layer.msg("失败")
            }
        })
        }
        else{
            layer.msg("密码不一致，请核对输入")
            $("#L_pass").val("")
            $("#L_repass").val("")
        }
        return false;	//禁止提交表单
    }

    function checkEmailCode(){
        $.post({
            url:"/user/checkEmail",
            data: {
                "email":$("#email").val(),
                "_csrf": $("#_csrf").val(),
                "code":$("#checkEmailCode").val(),
            },
            dataType:"text",
            success:function (data){
                if (data === "success"){
                    alert(data)
                    location.href="updateEmail"
                } else {
                    layer.msg(data)
                }
            },
            error:function (){
                layer.msg("提交失败")
            }
        })
    }

    function submitUpdateEmail(){
        $.post({
            url:"/user/updateEmail",
            data:{
                "email":$("#email").val(),
                "_csrf": $("#_csrf").val(),
                "code":$("#updateEmailCode").val(),
            },
            dataType:"text",
            success:function (data){
                layer.msg(data)
                location.href="edit"
            },
            error:function (){
                layer.msg("更改失败！")
            }
        })
    }
</script>
</body>

</html>